import { log } from "node:console";
import React, { Component } from "react";
type inpType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
//有专用的素材库ant design
interface iState {
  src: string;
}
export default class App extends Component {
  state: iState = {
    src: "",
  };

  getFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      // a. 创建一个文件加载器
      const reader = new FileReader();
      // b. 读取选择的文件
      reader.readAsDataURL(e.target.files[0]);
      // c. 监听文件加载成功
      reader.onload = () => {
        // d. 将结果赋值给 src
        this.setState({
          src: reader.result,
        });
      };
    }
  };
  inpRef = React.createRef<HTMLInputElement>();
  render() {
    return (
      <div>
        <input hidden ref={this.inpRef} type="file" onChange={this.getFile} />
        <button onClick={()=>{
          //在react中获取元素可以给元素添加ref属性
          this.inpRef.current?.click()
        }}>选择文件</button>
        <span>{this.state.src}</span>
        <img src={this.state.src} alt="加载中..." />
      </div>
    );
  }
}
